import "braft-editor/dist/index.css";
import React from "react";
import BraftEditor from "braft-editor";
import { ContentUtils } from "braft-utils";
// import { ImageUtils } from "braft-finder";
import PropTypes from "prop-types";
import { FileImageOutlined } from "@ant-design/icons";
import {Upload, message, Button} from "antd";
import "./style.less";
import "@/style/view-style/editor.less";
const options = {
  defaultValue: 200, // 指定默认限制数，如不指定则为Infinity(无限)--富文本
};
const controls = [
  "undo",
  "redo",
  "separator",
  "font-size",
  "text-color",
  "bold",
  "italic",
  "underline",
  "strike-through",
  "separator",
  "superscript",
  "subscript",
  "remove-styles",
  "emoji",
  "separator",
  "text-indent",
  "text-align",
  "separator",
  "headings",
  "list-ul",
  "list-ol",
  "blockquote",
  "separator",
  "link",
  "separator",
  "separator",
  "separator",
  "clear",
];
class TheQuill extends React.Component {
  state = {
    editorState: BraftEditor.createEditorState(this.props.defaultValue),
    data: '',
  };
  /**
   * @desc 富文本修改事件
   * */
  handleChange = (editorState) => {
    // 获取编辑器的文本内容状态
    const currentContent = editorState.getCurrentContent();
    // 获取编辑器文本长度，getPlainText返回当前编辑器的文本内容，字符串类型
    const currentContentLength = currentContent.getPlainText('').length;
    if (this.props.maxTextLength) {
      if (currentContentLength > this.props.maxTextLength) {
        this.setState({
          editorState: BraftEditor.createEditorState(this.state.data),
        })
        message.info({
          content: "超出最大字数" + this.props.maxTextLength + "限制",
        })
        // 回传数据
        this.props.setNewsContent(this.state.data, currentContentLength);
      } else {
        this.setState({
          data: editorState.toHTML(),
          editorState,
        })
        // 回传数据
        this.props.setNewsContent(editorState.toHTML(), currentContentLength);
      }
    }
    else {
      this.setState({ editorState });
      this.props.setNewsContent(editorState.toHTML(), currentContentLength);
    }
  };
  /**
   * @desc 上传图片事件
   * */
  uploadHandler = (param) => {
    if (!param.file) {
      return false;
    }
    let formdata = new FormData();
    formdata.append("file", param.file);
    React.$postMedia(React.$BaseUrl+"/admin/oss/image/upload", formdata).then((res) => {
      this.setState({
        editorState: ContentUtils.insertMedias(this.state.editorState, [
          {
            type: "IMAGE",
            url: res.data,
          },
        ]),
      });
    });
  };
  handleBeforeInput = (e, editorState) => {
    // return 'handled'
  }
  upData = (v, length) => {
    this.setState({
      editorState: BraftEditor.createEditorState(v,)
    })
  };
  render() {
    const extendControls = [
      {
        key: "antd-uploader",
        type: "component",
        component: (
          <Upload
            accept="image/*"
            showUploadList={false}
            customRequest={this.uploadHandler}
          >
            {/* 这里的按钮最好加上type="button"，以避免在表单容器中触发表单提交，用Antd的Button组件则无需如此 */}
            <button
                disabled={this.props.disUploadImg??false}
                type="button"
                className="control-item button upload-button"
                data-title="插入图片"
            >
              <FileImageOutlined />
            </button>
          </Upload>
        ),
      },
    ];
    console.log(this.props.controls)
    return (
      <div style={{ display: "flex", justifyContent: "center" }}>
        <div className="editor-wrapper" style={{ width: this.props.width }}>
          <BraftEditor
            style={{ width: this.props.width, height: this.props.height }}
            value={this.state.editorState}
            onChange={this.handleChange}
            controls={this.props.controls ? this.props.controls.controls : controls}
            extendControls={this.props.controls ? this.props.controls.extendControls : extendControls}
            handleBeforeInput={this.handleBeforeInput}
          maxLength={this.props.maxTextLength ?? Infinity}
          // onReachMaxLength={this.handleMaxLength}
          />
        </div>
      </div>
    );
  }
}
TheQuill.propTypes = {
  value: PropTypes.string,
  setNewsContent: PropTypes.func,
  maxTextLength: PropTypes.number
};
TheQuill.defaultProps = {
  value: null,
  width: "100%",
  maxTextLength: 0
};
export default TheQuill;
